<template>
  <section class="tabBar-wrap">
    <article class="tabBar-box">
      <ul class="tabBar-nav" v-if="navList.length > 0">
        <li class="item" v-for="(item, index) in changeid==1?navList:e_navList"
            @click="selectNavItem(index,item.pagePath)"
            :key="index">
          <p class="item-images">
            <image :src="selectNavIndex===index ? item.selectedIconPath : item.iconPath" alt="iconPath"/>
          </p>
          <div :class="selectNavIndex===index ? 'item-text item-text-active' : 'item-text' ">
            {{item.text}}
          </div>
        </li>

      </ul>
    </article>
  </section>
</template>
<script>

  export default {
     props: ['selectNavIndex', 'needButton', 'handButton', 'btnText'],
    data() {
      return {
        changeid:'',
        navList: [
          {
            pagePath: "/pages/index/main",
            iconPath: "/static/images/home.png",
            selectedIconPath: "/static/images/home_red.png",
            text: "首页"
          },
          {
            pagePath: "/pages/shop_car/main",
            iconPath: "/static/images/shopping_cart.png",
            selectedIconPath: "/static/images/shopping_cart_red.png",
            text: "购物车"
          },
          {
            pagePath: "/pages/my/main",
            iconPath: "/static/images/mine.png",
            selectedIconPath: "/static/images/mine_red.png",
            text: "我的"
          }
        ],
        e_navList: [
          {
            pagePath: "/pages/index/main",
            iconPath: "/static/images/home.png",
            selectedIconPath: "/static/images/home_red.png",
            text: "首页"
          },
          {
            
          },
          {
            pagePath: "/pages/my/main",
            iconPath: "/static/images/mine.png",
            selectedIconPath: "/static/images/mine_red.png",
            text: "我的"
          }
        ],
      }
    },
    onLoad(){
      wx.hideTabBar()
      this.changeid = this.globalData.loginId
    },
    created() {
    },
    // 页面下载时触发
    onUnload: function () {
      wx.hideTabBar()
    },
    
    methods: {
      selectNavItem(index, pagePath) {
        if (index === this.selectNavIndex) {
          return false;
        }
        this.bindViewTap(pagePath);
      },

      /**
       * 路由跳转
       */
      bindNavigateTo(url) {
        console.log('ssssss')
        wx.navigateTo({
          url
        })
      },

      /**
       * tabBar路由跳转
       */
      bindViewTap(url) {
        // 回到顶部
        if (url === '../index/main') {
          store.commit('setGroupsID', '');
        }
        wx.switchTab({
          url,
        })
      },
    }
  }
</script>

<style lang='less'>
  .tabBar-box {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 100rpx;
    border-top: 2rpx solid #eee;
    background-color: #fff;
  }

  .tabBar-nav {
    width: 100%;
    height: 100rpx;
    display: flex;
    padding: 0 148rpx;
    box-sizing: border-box;
    align-items: center;
    justify-content: space-between;
    .item {
      // flex: 1;
      width: 44rpx;
      height: 72rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      // text-align: center;
    }
    .item-text {
      color: #333;
      font-size: 18rpx;
      white-space: nowrap;
      transition: .24s linear;
    }
    .item-text-active {
      color: #FF3D4FFF;
    }
    .item-images {
      width: 44rpx;
      height: 44rpx;
      margin: 0 auto;
      text-align: center;
      transition: .24s linear;


      image{
        display: inline;
         width: 44rpx;
        height: 44rpx;
      }
    }
  }
  
</style>
